<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <base href="http://www.runoob.com/images/" target="_blank">
    <link rel="stylesheet" type="text/css" href="styles.css">
    <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
        $(function () {
            showData();
        })
        function showData() {
            $.ajax({
                url: "http://localhost/users",
                type: "get",
                data: { },
                dataType: "json",
                async: false,
                success:function (data) {
                    var str = "";
                    $.each(data,function (i) {
                        str += "<tr>";
                        str += "    <td>"+data[i].id+"</td>";
                        str += "    <td>"+data[i].name+"</td>";
                        str += "    <td>"+data[i].email+"</td>";
                        str += "</tr>";
                    });
                    $("table").append(str);
                },
                error: function () {}
            })
        }
    </script>
</head>
<body>
<h1>我的第一个标题</h1>
<h2>我是一个标题</h2>
<h3>我是一个标题</h3>
<h4>我是一个标题</h4>
<h5>我是一个标题</h5>
<h6>我是一个标题</h6>
<p>我的第一个段落。</p>
<p>这是另外一个段落。</p>
<hr>
<br>
<h2>水果</h2>
<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橙子</li>
    <li>西瓜</li>
</ul>

<a href="https://www.runoob.com">这是一个链接</a>
<img src="/images/logo.png" width="258" height="39" />

<b>加粗文本</b><br><br>
<i>斜体文本</i><br><br>
<code>电脑自动输出</code><br><br>
这是 <sub> 下标</sub> 和 <sup> 上标</sup>

<h4>一列:</h4>
<table border="1">
    <tr>
        <td>100</td>
    </tr>
</table>

<h4>一行三列:</h4>
<table border="1">
    <tr>
        <td>100</td>
        <td>200</td>
        <td>300</td>
    </tr>
</table>

<h4>两行三列:</h4>
<table border="1">
    <tr>
        <td>100</td>
        <td>200</td>
        <td>300</td>
    </tr>
    <tr>
        <td>400</td>
        <td>500</td>
        <td>600</td>
    </tr>
</table>

<table>
    <thead>
        <tr>
            <th>Month</th>
            <th>Savings</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>January</td>
            <td>$100</td>
        </tr>
        <tr>
            <td>February</td>
            <td>$80</td>
        </tr>
        <tr th:each="user : ${users}">
            <td th:text="${user.name}">用户名</td>
            <td th:text="${user.email}">用户邮箱</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Sum</td>
            <td>$180</td>
        </tr>
    </tfoot>
</table>
<table border="1px solid">
    <tr>
        <td>编号</td>
        <td>姓名</td>
        <td>年龄</td>
        <td>分数</td>
        <td>出生日期</td>
    </tr>
</table>
</body>
</html>